import React, { useState } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import './Home.less';

const Home: React.FC = () => {
    const navigate = useNavigate();
    const [selected, setSelected] = useState<string>('');

    const handleItemClick = (item: string) => {
        setSelected(item);
        console.log(`Navigating to: ${item}`);
        if (item === '返回') {
            navigate('/login');
        } else if (item === '业务平台') {
            navigate('/service/guangai');
        } else {
            navigate(`/home/${item}`);
        }
    };

    return (
        <div className="home">
            <div className='Home-header'>
                <h2>齐溪水库灌区运行管理平台</h2>
                <div className='Home-header-right'>
                    <div
                        className={`HeaderItem ${selected === '运行管理' ? 'selected' : ''}`}
                        onClick={() => handleItemClick('ErrorCaptured')}
                    >
                        运行管理
                    </div>
                    <div
                        className={`HeaderItem ${selected === '水资源管理' ? 'selected' : ''}`}
                        onClick={() => handleItemClick('water')}
                    >
                        水资源管理
                    </div>
                    <div
                        className={`HeaderItem ${selected === '工程安全' ? 'selected' : ''}`}
                        onClick={() => handleItemClick('Engineering-security')}
                    >
                        工程安全
                    </div>
                    <div
                        className={`HeaderItem ${selected === '业务平台' ? 'selected' : ''}`}
                        onClick={() => handleItemClick('业务平台')}
                    >
                        业务平台
                    </div>
                    <div
                        className={`HeaderItem ${selected === '返回' ? 'selected' : ''}`}
                        onClick={() => handleItemClick('返回')}
                    >
                        返回
                    </div>
                </div>
            </div>
            <div className='Home-content'>
                <Outlet />
            </div>
        </div>
    );
};

export default Home;